<!DOCTYPE html>
<html>
<head>
	<title>vertival</title>
	<meta charset="utf-8" />
</head>
<body>
	<div>
		<div>居中</div>
		<ul id="div-list">

		</ul>
	</div>
</body>
</html>
<script>
	let ul=document.getElementById('div-list');
	let arr=["line-height","flex","table->table-cell","transform","位置全0","after里面增加咦给高度一样的inline-block","flex+margin:auto","webkit-box"];
	function newLis(ul,n){
	  for(let i=0;i<n;i++){
	  	let li=document.createElement('li'),lii=document.createElement('i'),img=new Image();
	  	li.setAttribute("onclick","liClick(event)");
	  	let bgn=parseInt(1+Math.random()*244);
	  	li.style.backgroundColor=`rgb(${bgn},${bgn},${bgn})`;
	  	li.setAttribute("class",'li_'+i);
	  	lii.innerText=arr[i]||'';
	  	li.appendChild(lii);
	  	li.appendChild(img);
	  	ul.appendChild(li);
	  }
	}
	newLis(ul,10);
</script>
<style type="text/css">
#div-list li{
	list-style: none;
	margin:10px;
	width:100px;
	height:100px;
	font-size:12px;
	font-weight:bold;
	float:left;
	color:blue;
	margin-right:5px;
	text-align: center;
}
#div-list img{
	height:10px;
	width:10px;
	background-color:red;
}
/*1.line-height*/
.li_0{
	line-height:100px;
}
.li_0 img{
		vertical-align: middle;/* 注.处理line-height可能会失效 */
}
/*2.flex*/
.li_1{
	display:flex;
	align-items: center;
	justify-content: center;
}
/*3.table->table-cell*/
.li_2{
	display:table;
}
.li_2 i{
	display:table-cell;
	vertical-align: middle;
}
.li_2 img{
	display:table-cell;
	vertical-align: middle;
	line-height:100px;
}
/*transform*/
.li_3{
	position:relative;
}
.li_3 i,.li_3 img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
/*position->margin:auto*/
.li_4{
	position:relative;
}
.li_4 i,.li_4 img{
	position:absolute;
	overflow: auto;
  margin: auto;
	left:0;
	top:0;
	bottom:0;
	right:0;
}
.li_4 i{
	display:block;
}
/*::after;*/
.li_5{
	white-space: nowrap;
}
.li_5 i,.li_5 img{
	max-width:40%;
	max-height:100px;
	display:inline-block;
	white-space: normal;
	word-break: break-all;
	word-wrap:break-word;
	vertical-align:middle;
}
.li_5 i::after,.li_5 img::after{
	content:' ';
	width:0;
	height:100px;
	display:inline-block;
	vertical-align: middle;
}
/*flex+margin:auto*/
.li_6{
	display:flex;
}
.li_6 i,.li_6 img{
	margin:auto;
	flex:1;
	overflow:hidden;
}
/*display:-webkit-box*/
.li_7{
 	display: -webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;
  -webkit-box-orient: vertical;
  text-align: center
}
</style>
